<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'></script>
    <script src='https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'></script>
    <!-- 生产环境中不建议使用 -->
    <script src='https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js'></script>
</head>

<body>
    <div id='app'>
    </div>
    <script type='text/babel'>
        /*
            前言：
                经过前面的学习，你一定认为state真的挺好用的对吧。但是我现在给你提一个问题，我现在想让我写的组件，他显示的内容我在这个组件创建的时候才告诉他。怎么样？是不是发现state没有办法做到？是的，state只能做到给属性初始值以及后续的改动。但是无法做到在组件创建的时候根据传入的值动态的显示不同内容。所以这就引出了我们接下来要讲的props。
        */
        class Student extends React.Component{
            render(){
                return (
                    // 读取的方式也很简单，直接this.props即可，和this.state一样。都是组件实例对象上的一个属性
                    <ul>
                        <li>姓名:{this.props.name}</li>
                        <li>性别:{this.props.sex}</li>
                        <li>年龄:{this.props.age}</li>
                    </ul>
                )
            }
        }

        // props的用法也很简单，就像html中给标签加属性一样，你在组件中添加的属性，最终会以key:value的形式放到组件实例对象的props中。注意如果传入的值是数值类型或者js表达式，别忘了用大括号代替引号
        ReactDOM.render(<Student name='zs' sex="男" age={20}/>,document.getElementById('app'))
    </script>
</body>

</html>